{% extends 'base.html' %}
{% load staticfiles %}
{% block custom_css%}
<style>
    span {
        margin-right: 20px;
    }
</style>
{% endblock%}

{% block content %}

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    {%if msg%}
    <div class="alert alert-success">
        <strong>{{msg}}</strong>
    </div>
    {%endif%}
    <h2 class="page-header">入住登记</h2>
    <div>
        <div style="margin-bottom:20px;">
            <h3><span>标准间：{{standard_room}}</span><span>大床房：{{big_room}}</span><span>商务双人间：{{business_double_room}}</span><span>豪华大床房：{{deluxe_big_room}}</span>
            </h3>
        </div>
        <div>
            <form class="form-horizontal" method="POST" action="/enter">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="name" id="inputEmail3">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">身份证</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="id_card" id="id_card">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">入住人数</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="people" id="inputPassword3">
                    </div>
                </div>
                {%if room_num%}
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">房间号</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="room_num" value="{{room_num}}" id="room-num">
                    </div>
                </div>
                {%endif%}
                <div class="form-group">
                    <label for="email" class="col-sm-2 control-label">房间类型</label>
                    <div class="col-sm-5">
                        <select class="form-control" name='room_type' id="select-input">
                            <option value="1" {%if room_type == 1%}selected="selected" {%endif%}>标准间</option>
                            <option value="2" {%if room_type == 2%}selected="selected" {%endif%}>大床房</option>
                            <option value="3" {%if room_type == 3%}selected="selected" {%endif%}>商务双人间</option>
                            <option value="4" {%if room_type == 4%}selected="selected" {%endif%}>豪华大床房</option>
                        </select>
                    </div>
                    <div class="col-sm-4 tips"></div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">手机号</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="mobile" id="inputEmail3">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">入住时间</label>
                    <div class="col-sm-5">
                        <!-- <input type="text" class="form-control" name="s_time"> -->
                        <input id="start-time" class="form-control" name="startDate"
                            onclick="WdatePicker({dateFmt:'yyyy-MM-dd', el:'start-time', maxDate:'#F{$dp.$D(\'end-time\')}',onpicked: function () { 
                                var id_card = $('#id_card').val()
                                var room_type = $('#select-input').val()
                                var start_time = $('#start-time').val()
                                var end_time = $('#end-time').val()
                                var room_num = $('#room-num').val()
                                if (id_card && room_type && start_time && end_time) {
                                    $.ajax({
                                        type: 'POST',
                                        url: '/order_money',
                                        data: {
                                            id_card: id_card,
                                            room_type: room_type,
                                            start_time: start_time,
                                            end_time: end_time,
                                            room_num: room_num,
                                            csrfmiddlewaretoken:'{{ csrf_token }}'
                                        },
                                        success: function (result) {
                                            if (result.status == 'ok') {
                                                if (result.msg)
                                                {
                                                    alert(result.msg)
                                                }else {
                                                    $('#money').val(result.data+'元')
                                                }
                                            }
                                        }
                                    })
                                }
                        
                        }})"
                            type="text" readonly="readonly" style="width: 188px;cursor: pointer;">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">离店时间</label>
                    <div class="col-sm-5">
                        <!-- <input type="text" class="form-control" name="e_time" id="inputEmail3"> -->
                        <input id="end-time" class="form-control" name="endDate"
                            onclick="WdatePicker({dateFmt:'yyyy-MM-dd', el:'end-time', minDate:'#F{$dp.$D(\'start-time\')}', onpicked: function () { 
                                var id_card = $('#id_card').val()
                                var room_type = $('#select-input').val()
                                var start_time = $('#start-time').val()
                                var end_time = $('#end-time').val()
                                var room_num = $('#room-num').val()
                                if (id_card && room_type && start_time && end_time) {
                                    $.ajax({
                                        type: 'POST',
                                        url: '/order_money',
                                        data: {
                                            id_card: id_card,
                                            room_type: room_type,
                                            start_time: start_time,
                                            end_time: end_time,
                                            room_num: room_num,
                                            csrfmiddlewaretoken:'{{ csrf_token }}'
                                        },
                                        success: function (result) {
                                            if (result.status == 'ok') {
                                                if (result.msg)
                                                {
                                                    alert(result.msg)
                                                }else {
                                                    $('#money').val(result.data+'元')
                                                }
                                            }
                                        }
                                    })
                                }
                            }})"
                            type="text" readonly="readonly" style="width: 188px;cursor: pointer;">
                    </div>
                </div>
                <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">消费金额</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" name="money" id='money'>
                        </div>
                    </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-5">
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="inlineRadio1" value="male" checked="checked">男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="inlineRadio2" value="female">女
                        </label>
                    </div>
                </div>
                {% csrf_token %}
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-2">
                        <button type="submit" class="btn btn-primary">办理入住</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/static/calendar/WdatePicker.js"></script>
<script>
    $('#select-input').bind("input propertychange",function () {
        var id_card = $('#id_card').val()
        var room_type = $('#select-input').val()
        var start_time = $('#start-time').val()
        var end_time = $('#end-time').val()
        var room_num = $('#room-num').val()
        if (id_card && room_type && start_time && end_time) {
            $.ajax({
                type: "POST",
                url: "/order_money",
                data: {
                    id_card: id_card,
                    room_type: room_type,
                    start_time: start_time,
                    end_time: end_time,
                    room_num: room_num,
                    csrfmiddlewaretoken:'{{ csrf_token }}'
                },
                success: function (result) {
                    if (result.status == 'ok') {
                        if (result.msg)
                        {
                            alert(result.msg)
                        }else {
                            $('#money').val(result.data+'元')
                        }
                    }
                }
            })
        }
    })
    $('#id_card').bind("input propertychange",function () {
        var id_card = $('#id_card').val()
        var room_type = $('#select-input').val()
        var start_time = $('#start-time').val()
        var end_time = $('#end-time').val()
        var room_num = $('#room-num').val()
        if (id_card && room_type && start_time && end_time) {
            $.ajax({
                type: "POST",
                url: "/order_money",
                data: {
                    id_card: id_card,
                    room_type: room_type,
                    start_time: start_time,
                    end_time: end_time,
                    room_num: room_num,
                    csrfmiddlewaretoken:'{{ csrf_token }}'
                },
                success: function (result) {
                    if (result.status == 'ok') {
                        if (result.msg)
                        {
                            alert(result.msg)
                        }else {
                            $('#money').val(result.data+'元')
                        }
                    }
                }
            })
        }
    })
</script>
{% endblock %}